<template>
  <div>
    <el-tabs v-model="lang" @tab-change="GetData()">
      <el-tab-pane label="zh" name="zh"></el-tab-pane>
      <el-tab-pane label="en" name="en"></el-tab-pane>
      <el-tab-pane label="ru" name="ru"></el-tab-pane>
    </el-tabs>
    <h1>首页轮播图</h1>
    <selectFile show-mode="image" v-model="swiper" :max="9"></selectFile>
    <h1>首页侧边栏图片</h1>
    <selectFile show-mode="image" v-model="sidePicture" :max="9"></selectFile>
    <div class="mt-6">
      <el-button @click="handleUpdateIndexPageClick" type="success">设置</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import selectFile from '@/components/select-file/select-file.vue'
import { onMounted, ref } from 'vue'
import { GenerateIndexPageInfo, FindIndexPageInfo } from '@/service'
import { ElMessage } from 'element-plus'

const swiper = ref()
const sidePicture = ref()
const lang = ref('zh')
const handleUpdateIndexPageClick = () => {
  GenerateIndexPageInfo({
    swiper: swiper.value,
    language: lang.value,
    sidePicture: sidePicture.value
  }).then((res) => {
    ElMessage({
      type: 'success',
      message: res.msg
    })
  })
}

const GetData = async () => {
  const res = await FindIndexPageInfo(lang.value)
  swiper.value = res.data.swiper?.swiper ?? ""
  sidePicture.value = res.data.swiper?.sidePicture ?? ""
}
onMounted(() => {
  GetData()
})
</script>
